<div id="siteLogin">
	<g:formRemote name="siteLoginForm" 
		update="siteLogin" url="[controller: 'user', action: 'siteLogin']" before="showLoadingImageLogin();">

		<div class="cleaner"></div>

		<div class="form-horizontal">

			<div class="control-group">
				<h5>
					<g:message code="auth.login.with.site.account" />
				</h5>
			</div>

			<g:hasErrors bean="${userLogin}">
				<g:eachError bean="${userLogin}" var="error">
					<div id="signinErrors" class="alert alert-error">
						<a class="close" data-dismiss="alert">×</a>
						<g:message error="${error}" />
					</div>
				</g:eachError>
			</g:hasErrors>

			<div
				class="control-group ${hasErrors(bean: userLogin, field: 'userId', 'error')}">
				<label class="control-label" for="inputId"><g:message
						code="auth.login.credentials.id" /></label>
				<div class="controls">
					<g:field id="inputId" class="input-large" type="text" name="userId"
						value="${userLogin?.userId}"
						placeholder="${message(code: 'auth.login.credentials.usernameOrEmail')}" />
				</div>
			</div>

			<div
				class="control-group ${hasErrors(bean: userLogin, field: 'password', 'error')}">
				<label class="control-label" for="inputPassword"><g:message
						code="auth.login.credentials.password" /></label>
				<div class="controls">
					<g:field id="passwordField" class="input-large" type="password"
						name="password" value="${userLogin?.password}"
						placeholder="${message(code: 'auth.login.credentials.password')}" />
				</div>
			</div>

			<div class="control-group">
				<div class="controls">
					<label class="checkbox"> <input type="checkbox" /> <g:message
							code="auth.login.remember" />
					</label>
					<div class="cleaner"></div>
					<button id="loginButton" class="btn" style="margin-top: 13px;">
						<g:message code="auth.login" />
					</button>
					<img id="loadingImageLogin" class="loadingImageLogin"
						src="${resource(dir:'images', file: 'ajax-loader.gif') }"
						alt="image"></img>
				</div>
			</div>


		</div>
	</g:formRemote>
	
	<script type="text/javascript">
		$(document).ready(function() {
			$("#loadingImageLogin").hide();
		});

		function showLoadingImageLogin() {
			$("#loadingImageLogin").fadeIn();
		}
	</script>
</div>